import React, { Component, useEffect, useState } from 'react';
import "./index.less"
import { Form, Input, Button, Select, Table, Tabs, Radio } from 'antd';
import { connect, useDispatch } from "umi"
const { Option } = Select;

//表单
const layout = {
    labelCol: { span: 16 },
    wrapperCol: { span: 24 },
};
const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};

//获取仓库数据
const mapStateToProps = (state: any, ownProps: any) => {
    return state
}
//声明函数式组件 
const ShowUser:any = (props: any) => {
    //调用 dispatch
    let dispatch = useDispatch()
    //dva返回展示数据
    let tabList = props.showUser.showlist
    //首页刷新数据
    useEffect(() => {
        dispatch({ type: "showUser/getshowlist", action: 0 })
    }, [])  //第二个参数 必须传 否则死循环

    //tab切换数据
    let [list, setlist] = useState(["用户数据", "身份数据", "api接口权限", "身份和api接口关系", "视图接口权限", "身份和视图权限关系"])
    //点击切换数据
    const changeData = (ind: number) => {

        dispatch({ type: "showUser/getshowlist", action: ind })
       
        setcolumns(columns[ind])
    }


    //表格字段
    const columns = [
        [
            {id:1},
            { title: '姓名', dataIndex: 'user_name', key: 'user_name' },
            { title: '密码', dataIndex: 'user_pwd', key: 'user_pwd' },
            { title: '身份', dataIndex: 'identity_text', key: 'identity_text' },
            

        ],
        [
            {id:2},
            { title: '身份', dataIndex: 'identity_text', key: 'identity_text1' },
            

        ],
        // api_authority_id
        [
            {id:3},
            { title: '请求方式', dataIndex: 'api_authority_method', key: 'api_authority_method1' },
            { title: '考试类型', dataIndex: 'api_authority_text', key: 'api_authority_text' },
            { title: '请求链接', dataIndex: 'api_authority_url', key: 'api_authority_url' },
            

        ],
        // identity_api_authority_relation_id
        [
            {id:4},
            { title: '请求方式', dataIndex: 'api_authority_method', key: 'api_authority_method2' },
            { title: '考试类型', dataIndex: 'api_authority_text', key: 'api_authority_text2' },
            { title: '请求链接', dataIndex: 'api_authority_url', key: 'api_authority_url' },
            { title: '身份API关系ID', dataIndex: 'identity_api_authority_relation_id', key: 'identity_api_authority_relation_id' },
            { title: '身份', dataIndex: 'identity_text', key: 'identity_text3' },
            
        ],
        [
            {id:5},
            { title: '视图', dataIndex: 'view_authority_text', key: 'view_authority_text1' },
            { title: '视图ID', dataIndex: 'view_id', key: 'view_id' },
            { title: '视图权限ID', dataIndex: 'view_authority_id', key: 'view_authority_id' },
            

        ],
        [
            {id:6},
            { title: '视图', dataIndex: 'view_authority_text', key: 'view_authority_text2' },
            { title: '身份视图关系ID', dataIndex: 'identity_view_authority_relation_id', key: 'identity_view_authority_relation_id' },
            { title: '视图权限', dataIndex: 'view_authority_text', key: 'view_authority_text3' },
            { title: '视图ID', dataIndex: 'view_id', key: 'view_id1' },
            
        ],
        
    ];
    //动态表格字段数据
    let [columnss,setcolumns] = useState(columns[0])


    return (
        <div className="show_box">
            <h2 className="headerTitle">
                用户展示
            </h2>
            <div className="show_tab">
                {
                    list.map((item, index) => {
                        return <Button key={index} onClick={changeData.bind(this, index)}>{item}</Button>
                    })
                }
            </div>
            <h3 className="headerTitle">
                用户数据
            </h3>
            <div className="show_main">
                <Table
                    rowKey={()=>{
                        return Math.random()*5+1
                    }}
                    
                    columns={columnss}
                    dataSource={tabList}
                />
            </div>

        </div>
    );
}


export default connect(mapStateToProps, null)(ShowUser)